<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>游戏数据展示</title>
</head>
<body>
    <h1 style="text-align: center;">数据爬取结果</h1>
    <table border="1">
        <thead>
            <tr>
                <th>排名</th>
                <th>名称</th>
                <th>价格</th>
                <th>折扣</th>
                <th>好评率</th>
                <th>总评价数</th>
                <th>发布日期</th>
                <th>是否免费</th>
                <th>类型</th>
                <th>简介</th>
                <th>商店链接</th>
            </tr>
        </thead>
        <tbody id="game-data">
            <!-- 数据将通过 JavaScript 动态填充 -->
        </tbody>
    </table>

    <script>
        fetch('data/top_selling_summary.json')
            .then(response => {
                if (!response.ok) {
                    throw new Error('网络响应不正常');
                }
                return response.json();
            })
            .then(data => {
                populateTable(data);
            })
            .catch(error => {
                console.error('加载JSON数据时出错:', error);
                // 显示错误信息给用户
                const tableBody = document.getElementById('game-data');
                const errorRow = document.createElement('tr');
                const errorCell = document.createElement('td');
                errorCell.colSpan = 11;
                errorCell.textContent = '加载数据失败，请刷新页面重试。';
                errorCell.style.color = 'red';
                errorRow.appendChild(errorCell);
                tableBody.appendChild(errorRow);
            });
        function populateTable(data) {
            const tableBody = document.getElementById('game-data');
            tableBody.innerHTML = '';
            
            if (!data || data.length === 0) {
                const emptyRow = document.createElement('tr');
                const emptyCell = document.createElement('td');
                emptyCell.colSpan = 11;
                emptyCell.textContent = '没有找到游戏数据';
                emptyRow.appendChild(emptyCell);
                tableBody.appendChild(emptyRow);
                return;
            }
            
            data.sort((a, b) => a.rank - b.rank);
            
            data.forEach(game => {
                const row = document.createElement('tr');
                
                appendTableCell(row, game.rank);
                appendTableCell(row, game.name);
                appendTableCell(row, game.price === 0 ? '免费' : game.price);
                appendTableCell(row, game.discount_percent !== null ? `${game.discount_percent}%` : '无');
                appendTableCell(row, game.review_percent !== null ? `${game.review_percent}%` : '无数据');
                appendTableCell(row, game.review_total);
                appendTableCell(row, game.release_date);
                appendTableCell(row, game.is_free ? '是' : '否');
                appendTableCell(row, Array.isArray(game.genres) ? game.genres.join(', ') : '无类型信息');
                appendTableCell(row, game.short_description);
                
                const linkCell = document.createElement('td');
                if (game.store_url) {
                    const link = document.createElement('a');
                    link.href = game.store_url;
                    link.textContent = '商店页面';
                    link.target = '_blank';
                    linkCell.appendChild(link);
                } else {
                    linkCell.textContent = '无链接';
                }
                row.appendChild(linkCell);
                
                tableBody.appendChild(row);
            });
        }
        
        function appendTableCell(row, content) {
            const cell = document.createElement('td');
            cell.textContent = content !== null && content !== undefined ? content : '无数据';
            row.appendChild(cell);
        }

        // 调用函数渲染数据
        populateTable(gameData);
    </script>
</body>
</html>